<template>
    <Modal v-model:visible="visible" :title="title" width="100%" wrap-class-name="full-modal" destroyOnClose
        @ok="modalHandleOk" cancel-text="取消" ok-text="确认">

        <div class="map_container">
            <div id="map" class="map"></div>
        </div>

    </Modal>
</template>

<script lang="ts" name="PositionSelect">

import { defineComponent, ref, nextTick } from "vue";
import { Modal } from "ant-design-vue"
// import Map from '/@/utils/rw/map'
import { useMap } from "/@/hooks/rw/map";
import * as L from 'leaflet'
import i from "./icon.svg"
import { reactive } from "vue";

export default defineComponent({
    props: {

        mapOptions: {
            type: Object,
            default: () => { },
        },
        title: {
            type: String,
            default: "位置选择"
        },
        latlng: {
            type: Object,
            default: null,
        },
        hide: {
            type: Function,
            default: () => { },
        },
        confirmCallback: {
            type: Function,
            default: () => { },
        }
    },
    components: {
        Modal
    },
    emits: [""],
    setup(props, { emit }) {
        const { mapOptions, latlng, hide, confirmCallback } = props;
        
        const visible = ref<boolean>(false);

        let newLatlng = reactive({ lat: 0, lng: 0 });

        let mapInstance = null;

        function init() {
            // 初始化地图
            const { common } = useMap({
                el: "map",
            });

            common.loadMap({
                ...mapOptions
            }).then(({ leafletMap }) => {

                let icon = L.icon({
                    iconUrl: i, iconSize: [40, 40],
                    iconAnchor: [20, 35]
                });

                let marker = L.marker(latlng ?? leafletMap.getCenter(), { icon }).addTo(leafletMap);
                marker.pm.enableLayerDrag();

                marker.on("pm:dragend", (layer, shape) => {
                    newLatlng = layer.layer._latlng;
                })
            });
        }

        const showModal = () => {
            visible.value = true;

            nextTick(() => {
                init();
            })
        };

        const modalHandleOk = (e: MouseEvent) => {
            confirmCallback && confirmCallback(newLatlng);
            visible.value = false;
        };

        const afterClose = () => {
            hide && hide();
        }

        return {
            visible, mapInstance, latlng,
            init,

            showModal,
            modalHandleOk,

            afterClose,
        };
    },
})
</script>

<style lang="less" >
.map_container {
    width: 100%;
    height: 100%;

    .map {
        width: 100%;
        height: 100%;
    }
}


.full-modal {
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;
        height: 100%;
    }

    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
    }

    .ant-modal-body {
        flex: 1;
    }
}
</style>